<template>
  <div>
    <a-drawer
      :title="title"
      :maskClosable="true"
      :width="drawerWidth"
      placement="right"
      :closable="true"
      @close="handleCancel"
      :visible="visible"
      style="height: 100%;">

      <div>
        <a-form-model ref="form" slot="detail">
          <a-row>
            <div class="select-pk">
              <span>客户名称：</span>
              <span>{{model.customerName}}</span>
            </div>
            <div class="select-pk">
              <span>劳务类型：</span>
              <span>{{this.getLabourValue(model.labourType)}}</span>
            </div>
            <div class="select-pk">
              <span>劳务金额：</span>
              <span>￥{{model.labourMoney}}&nbsp;元</span>
            </div>
            <div class="select-pk">
              <span>项目名称：</span>
              <span>{{model.projectName != null||'' ? model.projectName:'无'}}</span>
            </div>
            <div class="select-pk">
              <span>项目地址：</span>
              <span>{{model.projectAddress}}</span>
            </div>
            <div class="select-pk">
              <span>劳务开始时间：</span>
              <span>{{model.labourBeginTime}}</span>
            </div>
            <div class="select-pk">
              <span>劳务结束时间：</span>
              <span>{{model.labourEndTime}}</span>
            </div>
            <div class="select-pk">
              <span>工期：</span>
              <span>{{model.workDeadline}}&nbsp;天</span>
            </div>
            <div class="select-pk">
              <span>备注：</span>
              <span>{{model.remarks}}</span>
            </div>
            <div class="select-pk">
              <span>创建人：</span>
              <span>{{model.createBy}}</span>
            </div>
            <div class="select-pk">
              <span>创建时间：</span>
              <span>{{model.createTime}}</span>
            </div>

            <div class="select-pk">
              <span>是否结算：</span>
              <span>{{model.isBalanceAccounts == 0?'已结算':'未结算'}}</span>
            </div>
            <div class="select-pk">
              <span>劳务状态：</span>
              <span>{{this.getLabourStatusValue(model.labourStatus)}}</span>
            </div>
            <div class="select-pk">
              <span>工人姓名：</span>
              <span>{{model.workName != null ? model.workName:'无'}}</span>
            </div>
            <div class="select-pk">
              <span>工人联系方式：</span>
              <span>{{model.workPhone != null ? model.workPhone:'无'}}</span>
            </div>
            <div class="select-pk">
              <span>工作图纸：</span>
              <img v-if="model.workBlueprintList != null" v-for="(item,index) in model.workBlueprintList" @click="showImageWorkBlueprint(item)" :src="getAvatarView(item)" style="width: 100px;height: 100px;margin-right: 10px;margin-bottom: 10px">
              <span v-if="model.workBlueprint == null">无</span>
            </div>
            <div class="select-pk">
              <span>工程量清单：</span>
              <img v-if="model.quantityInventoryList != null" v-for="(item,index) in model.quantityInventoryList" @click="showImageQuantityInventory(item)" :src="getAvatarView(item)" style="width: 100px;height: 100px;margin-right: 10px;margin-bottom: 10px">
              <span v-if="model.quantityInventory == null">无</span>
            </div>
            <div class="select-pk">
              <span>附件：</span>
              <div v-if="model.annex != null && model !== ''">
                <div v-for="(item,index) in model.annexList" :key="index"><a :href="item" target="_blank">{{getAnnexValue(item)}}</a></div>
              </div>
              <div v-if="model.annex == null || model.annex === ''">
                <span>无</span>
              </div>
            </div>
          </a-row>
        </a-form-model>
      </div>

    </a-drawer>
    <!--<a-modal :visible="previewVisible" :footer="null" @cancel="handleClose">
      <img alt="example" style="width: 100%" :src="previewImage"/>
    </a-modal>-->

    <a-modal :visible="previewVisibleWorkBlueprint" :footer="null" centered width="auto" @cancel="handleCloseWorkBlueprint">
      <JReview :path="previewImageWorkBlueprint" :pathList="model.workBlueprintList"></JReview>
    </a-modal>

    <a-modal :visible="previewVisibleQuantityInventory" :footer="null" centered width="auto" @cancel="handleCloseQuantityInventory">
      <JReview :path="previewImageQuantityInventory" :pathList="model.quantityInventoryList"></JReview>
    </a-modal>
  </div>

</template>

<script>
  import { disabledAuthFilter } from "@/utils/authFilter"
  import {filterDictTextByCache} from '@comp/dict/JDictSelectUtil'
  import {getFileAccessHttpUrl} from '@/api/manage'

  export default {
    name: "labourDetailModal",
    components: {
    },
    data () {
      return {
        departDisabled: false, //是否是我的部门调用该页面
        roleDisabled: false, //是否是角色维护调用该页面
        previewVisibleWorkBlueprint: false,
        previewVisibleQuantityInventory: false,

        previewImageWorkBlueprint:"",
        previewImageQuantityInventory:"",

        modalWidth:600,
        drawerWidth:'100%',
        labelCol: {
          xs: {span: 24},
          sm: {span: 5},
        },
        wrapperCol: {
          xs: {span: 24},
          sm: {span: 16},
        },
        modaltoggleFlag:true,
        confirmDirty: false,
        disableSubmit:false,
        departIdShow:false,
        title:"操作",
        visible: false,
        uploadLoading:false,
        confirmLoading: false,
        model:{},
        previewVisible: false,
        previewImage: '',
      }
    },
    methods: {
      isDisabledAuth(code){
        return disabledAuthFilter(code);
      },
      getAvatarView: function (avatar) {
        return getFileAccessHttpUrl(avatar)
      },
      getLabourValue(text){
        return filterDictTextByCache('customer_labour_distribute_labour_type', text);
      },
      getLabourStatusValue(text){
        return filterDictTextByCache('customer_labour_distribute_labour_status', text);
      },
      //窗口最大化切换
      toggleScreen(){
        if(this.modaltoggleFlag){
          this.modalWidth = window.innerWidth;
        }else{
          this.modalWidth = 800;
        }
        this.modaltoggleFlag = !this.modaltoggleFlag;
      },
      close () {
        this.$emit('close');
        this.visible = false;
      },
      handleCancel () {
        this.close()
      },
      //显示预览照片
      showImageWorkBlueprint(imgUrl){
        this.previewImageWorkBlueprint = imgUrl;
        this.previewVisibleWorkBlueprint = true;
      },
      showImageQuantityInventory(imgUrl){
        this.previewImageQuantityInventory = imgUrl;
        this.previewVisibleQuantityInventory = true;
      },
      getAnnexValue(value){
        let arr = value.split("/");
        let str = arr[arr.length-1];
        return str;
      },
      //关闭预览照片
      handleCloseWorkBlueprint() {
        this.previewVisibleWorkBlueprint = false;
      },
      handleCloseQuantityInventory(){
        this.previewVisibleQuantityInventory = false;
      },
    }
  }
</script>

<style scoped lang="less">
  @import '~@assets/less/common.less';
  .select-pk{
    display:flex;
    align-items:center;
    margin:10px 0;
    &>span{
      font-weight: bold;
    }
    &-text{
      width: calc(100% - 6em);
      height: 30px;
      text-indent: 1em;
      line-height: 28px;
      border: 1px solid #d9d9d9;
      border-radius: 4px;
    }
  }
  .avatar-uploader > .ant-upload {
    width:104px;
    height:104px;
  }
  .ant-upload-select-picture-card i {
    font-size: 49px;
    color: #999;
  }

  .ant-upload-select-picture-card .ant-upload-text {
    margin-top: 8px;
    color: #666;
  }

  .ant-table-tbody .ant-table-row td{
    padding-top:10px;
    padding-bottom:10px;
  }

  .drawer-bootom-button {
    position: absolute;
    bottom: 0;
    width: 100%;
    border-top: 1px solid #e8e8e8;
    padding: 10px 16px;
    text-align: right;
    left: 0;
    background: #fff;
    border-radius: 0 0 2px 2px;
  }

  /*【JTC-502】 添加用户两个滚动条*/
  /deep/ .ant-drawer-body {
    padding-bottom: 53px;
  }

</style>
